Panels

A panel provides contextual and detailed information based on an click or hover interaction of data by a user.

DetailDetail › DefaultDetail › Form with Inline EditDetail › Form with Inline Edit ActiveDetaildev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-panel slds-grid slds-grid--vertical slds-nowrap">
  <div class="slds-form--stacked slds-grow slds-scrollable--y">
    <div class="slds-panel__section slds-has-divider--bottom">
      <div class="slds-media slds-tile">
        <div class="slds-media__figure">
          <label class="slds-checkbox" for="completed">
            <input name="checkbox" type="checkbox" id="completed" />
            <span class="slds-checkbox--faux"></span>
            <span class="slds-assistive-text">Complete Task</span>
          </label>
        </div>
        <div class="slds-media__body">
          <p class="tile__title slds-truncate slds-text-heading--small"><a href="javascript:void(0);">Follow up on &#x27;15 contact</a></p>
          <div class="slds-tile__detail slds-text-body--small">
            <p class="slds-truncate">Jun 18</p>
            <div class="slds-button-group slds-m-top--small" role="group">
              <button class="slds-button slds-button--neutral slds-grow">Edit</button>
              <button class="slds-button slds-button--neutral slds-grow">Follow Up</button>
              <button class="slds-button slds-button--neutral slds-grow">Delete</button>
              <button class="slds-button slds-button--icon-border-filled">
                <svg aria-hidden="true" class="slds-button__icon">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">More Actions</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="slds-panel__section">
      <h3 class="slds-text-heading--small slds-m-bottom--medium">Task Information</h3>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Subject</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Follow up on &#x27;15 Contract</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Due Date</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">6/18/16</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Assigned TO</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Jason Dewar</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Name</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Adam Choi</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Related To</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Tesla Cloudhub + Anypoint Connectors</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Comments</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static slds-text-longform">Adam was open to doing more business in the 4th quarter. Follow up with marketing demo and email templates.</span>
        </div>
      </div>
    </div>
    <div class="slds-panel__section">
      <h3 class="slds-text-heading--small slds-m-bottom--medium">Additional Information</h3>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Status</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Not Started</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Priority</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Normal</span>
        </div>
      </div>
    </div>
  </div>
</div>

Component Overview

Usage

This table gives you a quick overview of the unique SLDS CSS classes that can be applied to create page headers.
Class NameUsage
.slds-panel
Applied to:

Outcome:

Container for slide out panels

Required:

Required

Comments:

--

.slds-panel__section
Applied to:

Outcome:

Contains sub sections of a panel

Required:

Required

Comments:

--

.slds-panel__actions
Applied to:

Outcome:

Contains form actions at the bottom of a panel

Required:

Required

Comments:

--